import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View, Image, WebView, Dimensions, Platform, TouchableWithoutFeedback, Alert, DeviceEventEmitter } from 'react-native';
import { Container, Content, List, ListItem, Text, Thumbnail, Icon } from 'native-base';
import { NavigationActions } from 'react-navigation';
const { width, height } = Dimensions.get('window');
const marginTop = Platform.OS === 'ios' ? 20 : 0;
export default class icons extends Component {
    render() {
        return (
            <Content>
            <View style={styles.four_image_view}>
                <Text>1</Text>
                <Icon name="add" /> 
                <Icon name="alarm" />
                <Icon name="add-circle" />
                <Icon name="albums" />
                <Icon name="alert" /> 
                <Icon name="american-football" />
                <Icon name="analytics" />
                <Icon name="aperture" />
            </View>
            <View style={styles.four_image_view}>
                 <Text>2</Text>
                <Icon name="apps" /> 
                <Icon name="appstore" />
                <Icon name="archive" />
                <Icon name="arrow-back" />
                <Icon name="arrow-down" />
                <Icon name="arrow-drop" />
                <Icon name="arrow-dropdown-circle" />
                <Icon name="arrow-dropleft" />
            </View>
            <View style={styles.four_image_view}>
                 <Text>3</Text>
                <Icon name="arrow-dropleft-circle" /> 
                <Icon name="arrow-dropright" /> 
                <Icon name="arrow-dropright-circle" /> 
                <Icon name="arrow-dropup" /> 
                <Icon name="arrow-dropup-circle" /> 
                <Icon name="arrow-forward" /> 
                <Icon name="arrow-round-back" /> 
                <Icon name="arrow-round-down" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>4</Text>
                <Icon name="arrow-round-forward" /> 
                <Icon name="arrow-round-up" /> 
                <Icon name="arrow-up" /> 
                <Icon name="at" /> 
                <Icon name="attach" /> 
                <Icon name="backspace" /> 
                <Icon name="barcode" /> 
                <Icon name="baseball" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>5</Text>
                <Icon name="basket" /> 
                <Icon name="basketball" /> 
                <Icon name="battery-charging" /> 
                <Icon name="battery-dead" /> 
                <Icon name="battery-full" /> 
                <Icon name="beaker" /> 
                <Icon name="beer" /> 
                <Icon name="bicycle" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>6</Text>
                <Icon name="bluetooth" /> 
                <Icon name="boat" /> 
                <Icon name="body" /> 
                <Icon name="bonfire" /> 
                <Icon name="book" /> 
                <Icon name="bookmark" /> 
                <Icon name="bookmarks" /> 
                <Icon name="bowtie" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>7</Text>
                <Icon name="briefcase" /> 
                <Icon name="browsers" /> 
                <Icon name="brush" /> 
                <Icon name="bug" /> 
                <Icon name="build" /> 
                <Icon name="bulb" /> 
                <Icon name="bus" /> 
                <Icon name="cafe" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>8</Text>
                <Icon name="calculator" /> 
                <Icon name="calendar" /> 
                <Icon name="call" /> 
                <Icon name="camera" /> 
                <Icon name="car" /> 
                <Icon name="card" /> 
                <Icon name="cart" /> 
                <Icon name="cash" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>9</Text>
                <Icon name="chatboxes" /> 
                <Icon name="chatbubbles" /> 
                <Icon name="checkbox" /> 
                <Icon name="checkmark" /> 
                <Icon name="checkmark-circle" /> 
                <Icon name="clipboard" /> 
                <Icon name="clock" /> 
                <Icon name="close" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>10</Text>
                <Icon name="close-circle" /> 
                <Icon name="cloud" /> 
                <Icon name="cloud-circle" /> 
                <Icon name="cloud-done" /> 
                <Icon name="cloud-download" /> 
                <Icon name="cloud-outline" /> 
                <Icon name="cloud-upload" /> 
                <Icon name="cloudy" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>11</Text>
                <Icon name="cloudy-night" /> 
                <Icon name="code" /> 
                <Icon name="code-download" /> 
                <Icon name="code-working" /> 
                <Icon name="cog" /> 
                <Icon name="color-fill" /> 
                <Icon name="color-filter" /> 
                <Icon name="color-palette" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>12</Text>
                <Icon name="color-wand" /> 
                <Icon name="compass" /> 
                <Icon name="construct" /> 
                <Icon name="contact" /> 
                <Icon name="contacts" /> 
                <Icon name="contract" /> 
                <Icon name="contrast" /> 
                <Icon name="copy" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>13</Text>
                <Icon name="create" /> 
                <Icon name="crop" /> 
                <Icon name="cube" /> 
                <Icon name="cut" /> 
                <Icon name="desktop" /> 
                <Icon name="disc" /> 
                <Icon name="document" /> 
                <Icon name="done-all" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>14</Text>
                <Icon name="download" /> 
                <Icon name="easel" /> 
                <Icon name="egg" /> 
                <Icon name="exit" /> 
                <Icon name="expand" /> 
                <Icon name="eye" /> 
                <Icon name="eye-off" /> 
                <Icon name="fastforward" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>15</Text>
                <Icon name="female" /> 
                <Icon name="filing" /> 
                <Icon name="film" /> 
                <Icon name="finger-print" /> 
                <Icon name="flag" /> 
                <Icon name="flame" /> 
                <Icon name="flash" /> 
                <Icon name="flask" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>16</Text>
                <Icon name="flower" /> 
                <Icon name="folder" /> 
                <Icon name="folder-open" /> 
                <Icon name="football" /> 
                <Icon name="funnel" /> 
                <Icon name="game-controller-a" /> 
                <Icon name="game-controller-b" /> 
                <Icon name="git-branch" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>17</Text>
                <Icon name="git-commit" /> 
                <Icon name="git-merge" /> 
                <Icon name="git-compare" /> 
                <Icon name="git-network" /> 
                <Icon name="git-pull-request" /> 
                <Icon name="glasses" /> 
                <Icon name="globe" /> 
                <Icon name="grid" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>18</Text>
                <Icon name="hammer" /> 
                <Icon name="hand" /> 
                <Icon name="headset" /> 
                <Icon name="heart" /> 
                <Icon name="happy" /> 
                <Icon name="help" /> 
                <Icon name="help-buoy" /> 
                <Icon name="help-circle" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>19</Text>
                <Icon name="home" /> 
                <Icon name="ice-cream" /> 
                <Icon name="image" /> 
                <Icon name="images" /> 
                <Icon name="infinite" /> 
                <Icon name="information" /> 
                <Icon name="information-circle" /> 
                <Icon name="ionic" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>20</Text>
                <Icon name="ionitron" /> 
                <Icon name="jet" /> 
                <Icon name="key" /> 
                <Icon name="keypad" /> 
                <Icon name="laptop" /> 
                <Icon name="leaf" /> 
                <Icon name="link" /> 
                <Icon name="list" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>21</Text>
                <Icon name="list-box" /> 
                <Icon name="locate" /> 
                <Icon name="lock" /> 
                <Icon name="log-in" /> 
                <Icon name="log-out" /> 
                <Icon name="magnet" /> 
                <Icon name="mail" /> 
                <Icon name="mail-open" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>22</Text>
                <Icon name="male" /> 
                <Icon name="man" /> 
                <Icon name="map" /> 
                <Icon name="medal" /> 
                <Icon name="medical" /> 
                <Icon name="medkit" /> 
                <Icon name="megaphone" /> 
                <Icon name="menu" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>23</Text>
                <Icon name="mic" /> 
                <Icon name="mic-off" /> 
                <Icon name="microphone" /> 
                <Icon name="moon" /> 
                <Icon name="more" /> 
                <Icon name="move" /> 
                <Icon name="musical-note" /> 
                <Icon name="musical-notes" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>24</Text>
                <Icon name="navigate" /> 
                <Icon name="no-smoking" /> 
                <Icon name="notifications" /> 
                <Icon name="notifications-off" /> 
                <Icon name="nuclear" /> 
                <Icon name="nutrition" /> 
                <Icon name="open" /> 
                <Icon name="options" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>25</Text>
                <Icon name="outlet" /> 
                <Icon name="paper" /> 
                <Icon name="paper-plane" /> 
                <Icon name="partly-sunny" /> 
                <Icon name="pause" /> 
                <Icon name="paw" /> 
                <Icon name="people" /> 
                <Icon name="person" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>26</Text>
                <Icon name="person-add" /> 
                <Icon name="phone-landscape" /> 
                <Icon name="phone-portrait" /> 
                <Icon name="photos" /> 
                <Icon name="pie" /> 
                <Icon name="pin" /> 
                <Icon name="pint" /> 
                <Icon name="pizza" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>27</Text>
                <Icon name="plane" /> 
                <Icon name="planet" /> 
                <Icon name="play" /> 
                <Icon name="podium" /> 
                <Icon name="power" /> 
                <Icon name="pricetag" /> 
                <Icon name="pricetags" /> 
                <Icon name="print" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>28</Text>
                <Icon name="pulse" /> 
                <Icon name="qr-scanner" /> 
                <Icon name="quote" /> 
                <Icon name="radio" /> 
                <Icon name="radio-button-off" /> 
                <Icon name="radio-button-on" /> 
                <Icon name="rainy" /> 
                <Icon name="recording" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>29</Text>
                <Icon name="redo" /> 
                <Icon name="refresh" /> 
                <Icon name="remove" /> 
                <Icon name="remove-circle" /> 
                <Icon name="reorder" /> 
                <Icon name="repeat" /> 
                <Icon name="resize" /> 
                <Icon name="restaurant" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>30</Text>
                <Icon name="return-left" /> 
                <Icon name="return-right" /> 
                <Icon name="reverse-camera" /> 
                <Icon name="rewind" /> 
                <Icon name="ribbon" /> 
                <Icon name="rose" /> 
                <Icon name="sad" /> 
                <Icon name="school" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>31</Text>
                <Icon name="search" /> 
                <Icon name="send" /> 
                <Icon name="settings" /> 
                <Icon name="share" /> 
                <Icon name="share-all" /> 
                <Icon name="shirt" /> 
                <Icon name="shuffle" /> 
                <Icon name="skip-backward" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>32</Text>
                <Icon name="skip-forward" /> 
                <Icon name="snow" /> 
                <Icon name="speedometer" /> 
                <Icon name="square" /> 
                <Icon name="star" /> 
                <Icon name="star-half" /> 
                <Icon name="stats" /> 
                <Icon name="stopwatch" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>33</Text>
                <Icon name="subway" /> 
                <Icon name="sunny" /> 
                <Icon name="swap" /> 
                <Icon name="switch" /> 
                <Icon name="sync" /> 
                <Icon name="tablet-landscape" /> 
                <Icon name="tablet-portrait" /> 
                <Icon name="tennisball" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>34</Text>
                <Icon name="text" /> 
                <Icon name="thermometer" /> 
                <Icon name="thumbs-down" /> 
                <Icon name="thumbs-up" /> 
                <Icon name="thunderstorm" /> 
                <Icon name="time" /> 
                <Icon name="timer" /> 
                <Icon name="train" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>35</Text>
                <Icon name="transgender" /> 
                <Icon name="trash" /> 
                <Icon name="trending-down" /> 
                <Icon name="trending-up" /> 
                <Icon name="trophy" /> 
                <Icon name="umbrella" /> 
                <Icon name="undo" /> 
                <Icon name="unlock" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>36</Text>
                <Icon name="videocam" /> 
                <Icon name="volume-down" /> 
                <Icon name="volume-up" /> 
                <Icon name="volume-mute" /> 
                <Icon name="volume-off" /> 
                <Icon name="walk" /> 
                <Icon name="warning" /> 
                <Icon name="watch" /> 
            </View>
            <View style={styles.four_image_view}>
                 <Text>37</Text>
                <Icon name="water" /> 
                <Icon name="wifi" /> 
                <Icon name="wine" /> 
                <Icon name="woman" /> 
            </View>
             </Content>
        );
    }


}
const styles = StyleSheet.create({
    four_image_view: {
        paddingTop: 15,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    vertical_view: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        paddingBottom: 15,
    },

});

